<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	div{
		width: 250px;
		height: 250px;
		background: maroon;
		display: none;
	}
</style>
<script>
	function getStyle(elem,name){
		if(elem.style[name]){
			return elem.style[name];
		}else if(elem.currentStyle){
			return elem.currentStyle[name];
		}else if(document.defaultView&&document.defaultView.getComputedStyle){
			name = name.replace(/([A-Z])/g,"-$1");
			name = name.toLowerCase();
			
			var s = document.defaultView.getComputedStyle(elem,"");
			return s&&s.getPropertyValue(name);			
		}else{
			return null;
		}
	}
	function show(elem){
		elem.style.display="block";
	}
	function hide(elem){
		elem.style.display="none";
	}
	function setOpacity(elem,num){
		if(elem.filters){
			elem.style.filter= 'alpha(opacity='+num+')';;
		}else{
			elem.style.opacity = num/100;
		}
	}
	function fadeIn(elem){
		setOpacity(elem,0);
		show(elem);
		for(i=0;i<100;i+=5){
			(function(){
				var pos = i;
				setTimeout(function(){
					setOpacity(elem,pos);
				},(pos+1)*10);
			})();
		}
		btnText("fade out");
	}
	
	function fadeOut(elem){
		for(i=100;i>=0;i-=5){
			(function(){
				var pos=i;
				setTimeout(function(){
					setOpacity(elem,pos);
				},(pos+1)*10);
			})();
		}
		hide(elem);
		btnText("fade in");
	}
	function fadeAnimation(elem){
		var display = getStyle(elem,"display");
		display=="block"?fadeOut(elem):fadeIn(elem);
	}
	function btnText(text){
		document.getElementById("btn").innerHTML=text;
	}
	
	window.onload=function(e){
		var elem = document.getElementById("container");
		document.getElementsByTagName("button")[0].onclick=function(e){
			fadeAnimation(elem);
		}
	}
</script>
</head>
<body>
	<div id="container"></div>
	<button id="btn">fade  in</button>
</body>
</html>